<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS Controller</title>
    <script src="js/angular.min.js"></script>
</head>
<body>
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--名: <input type="text" ng-model="firstName"><br>-->
    <!--姓: <input type="text" ng-model="lastName"><br>-->
    <!--<br>-->
    <!--姓名: {{firstName + ' ' + lastName}}-->
<!--</div>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope) {-->
        <!--$scope.firstName = 'John';-->
        <!--$scope.lastName = 'Doe';-->
    <!--})-->
<!--</script>-->

<!--控制器方法-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--名: <input type="text" ng-model="firstName"><br>-->
    <!--姓: <input type="text" ng-model="lastName"><br>-->
    <!--<br>-->
    <!--姓名: {{fullName()}}-->
<!--</div>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope) {-->
        <!--$scope.firstName = 'John';-->
        <!--$scope.lastName = 'Doe';-->
        <!--$scope.fullName = function () {-->
            <!--return $scope.firstName + ' ' + $scope.lastName;-->
        <!--}-->
    <!--})-->
<!--</script>-->

<!--外部文件中的控制器-->
<!--<div ng-app="myApp" ng-controller="personController">-->
    <!--First Name: <input type="text" ng-model="firstName"><br>-->
    <!--Last Name: <input type="text" ng-model="lastName"><br>-->
    <!--<br>-->
    <!--Full Name: {{firstName + " " + lastName}}-->
<!--</div>-->
<!--<script src="js/personController.js"></script>-->

<div ng-app="myApp" ng-controller="nameCtrl">
    <ul>
        <li ng-repeat="x in names">
            {{x.name + ', ' + x.country}}
        </li>
    </ul>
</div>
<script src="js/nameCtrl.js"></script>
</body>
</html>